<template>
    <view class="container">
        <u-navbar
            leftText="购物车"
            :autoBack="true"
            leftIconSize="50rpx"
        >
            <view class="navbar"
                slot="left"
            >
                <u-icon
                    name="arrow-left"
                    size="50rpx"
                ></u-icon>
                <u--text
                    text="购物车"
                    size="34rpx"
                    bold
                ></u--text>
            </view>
            <view class="edit" @click="editCart()" slot="center">{{isEdit? "完成": "管理"}}</view>
        </u-navbar>
        <block v-if="cartList.length > 0">
            <view class="cart-info" :style="{ marginTop: barHeight }" >
                <block v-for="(item, k) in cartList" :key="k">
                    <view class="cart-item" v-if="item.product.type != 'shop'">
                        <view class="radio" :class="item.isCheck? 'radio-action': null" @click="change(item)"></view>
                        <view class="product">
                            <u-image
                                :src="item.product.mainImg"
                                width="198rpx"
                                height="198rpx"
                                radio="6rpx"
                            ></u-image>
                            <view class="product-info">
                                <u-text
                                    :text="item.product.name"
                                    :lines="1"
                                    size="28rpx"
                                ></u-text>
                                <view class="nft-tag"></view>
                                <view class="spec-names" v-if="item.sku">{{ item.sku.specNames }}</view>
                                <view class="spec-names" v-else> </view>
                                <view class="product-price">
                                    <text>总价</text>
                                    <u-text
                                        size="30rpx"
                                        bold
                                        :text="item.sku? item.sku.price:item.product.price"
                                        prefixIcon="rmb"
                                        iconStyle="font-size: 22rpx; font-weight: bold;top: 8rpx;"
                                    ></u-text>
                                </view>
                            </view>
                            <view class="buy-num">
                                <view class="minus" :class="item.num <= 1? 'minus-disabled':null" @click="count(item,-1)"></view>
                                <view class="num">{{ item.num }}</view>
                                <view class="add" v-if="item.sku" :class="item.num>=item.sku.stock? 'add-disabled':null" @click="count(item,1)"></view>
                                <view class="add" v-else :class="item.num>=item.product.stock? 'add-disabled':null" @click="count(item,1)"></view>
                            </view>
                        </view>
                    </view>
                    <view class="cart-item" v-else>
                        <view class="radio" :class="item.isCheck? 'radio-action': null" @click="change(item)"></view>
                        <view class="product">
                            <u-image
                                :src="item.product.mainImg"
                                width="198rpx"
                                height="198rpx"
                                radio="6rpx"
                            ></u-image>
                            <view class="product-info">
                                <view style="height: 88rpx">
                                    <u-text
                                        :text="item.product.name"
                                        :lines="2"
                                        size="28rpx"
                                    ></u-text>
                                </view>
                                <view class="spec-names" v-if="item.sku">{{ item.sku.specNames }}</view>
                                <view class="product-price">
                                    <text>总价</text>
                                    <u-text
                                        size="30rpx"
                                        bold
                                        :text="item.sku? item.sku.price:item.product.price"
                                        prefixIcon="rmb"
                                        iconStyle="font-size: 22rpx; font-weight: bold;top: 8rpx;"
                                    ></u-text>
                                </view>
                            </view>
                            <view class="buy-num">
                                <view class="minus" :class="item.num <= 1? 'minus-disabled':null" @click="count(item,-1)"></view>
                                <view class="num">{{ item.num }}</view>
                                <view class="add" v-if="item.sku" :class="item.num>=item.sku.stock? 'add-disabled':null" @click="count(item,1)"></view>
                                <view class="add" v-else :class="item.num>=item.product.stock? 'add-disabled':null" @click="count(item,1)"></view>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
            <view class="bottom">
                <view class="total">
                    <view class="total-left" @click="checkAll()" v-if="isEdit">
                        <view class="radio" :class="isCheckAll? 'radio-action':null"></view>
                        <view class="total-tip">全选</view>
                    </view>
                    <view class="total-right" v-else>
                        <view class="right-title">合计</view>
                        <u-text
                            size="40rpx"
                            bold
                            :text="getTotalPrice"
                            prefixIcon="rmb"
                            color="#356CE7"
                            iconStyle="font-size: 22rpx; color: #356CE7; font-weight: bold;top: 8rpx;"
                        ></u-text>
                    </view>
                </view>
                <view class="btn" @click="del" v-if="isEdit">立即删除</view>
                <view class="btn" @click="onsubmit" v-else>立即结算</view>
            </view>
        </block>
        <view class="empty" v-else>
            <u-empty
                text="购物车还没有商品，去首页看看吧~"
                icon="https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/empty-car.png"
                width="500rpx"
                height="500rpx"
                textSize="28rpx"
            >
            </u-empty>
        </view>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
import { getCartList, setCartCalculate, nftCreateOrder, getWechatPay, delCart  } from "@/config/api"
import { checkNullObj } from "@/untils/index"
export default {
    data() {
        return {
            radiovalue1: null,
            barHeight: null,
            cartList: [],
            totalPrice: 0.00,
            isEdit: false,
            isCheckAll: false,
            changeItem: {},
            confirm: {}
        }
    },
    computed: {
        isShowTags() {
            return this.$store.getters.isShowTags
        },
        getTotalPrice() {
            var price = 0
            this.cartList.forEach(info => {
                if (info.isCheck) {
                    if (info.sku) {
                        price += info.sku.price * info.num
                    } else {
                        price += info.product.price * info.num
                    }
                }
            })
            return price
        }
    },
    onShow() {
        this.getData()
    },
    onLoad() {
        const res = uni.getSystemInfoSync()
        var height = res.statusBarHeight
        //var height = this.$store.getters.statusBarHeight
        this.barHeight = height? height + 44 + "px": "44px"
    },
    methods: {
        async getData() {
            this.cartList = await getCartList()
        },
        change(info) {
            info.isCheck = !info.isCheck
            if (info.sku) {
                this.totalPrice = info.sku.price * info.num
            } else {
                this.totalPrice = info.product.price * info.num
            }
            if (info.isCheck && !this.isEdit) {
                this.changeItem = info
            } else {
                this.changeItem = {}
            }
            this.cartList.forEach(item => {
                if (info.id != item.id && !this.isEdit) {
                    item.isCheck = false
                }
            })
        },
        async count(info, num) {
            if (num < 0 && info.num <= 1) {
                return
            }
            if(info.sku) {
                if (num>0 && info.sku.stock <= info.num) {
                    return
                }
            }
            if (num>0 && info.product.stock <= info.num) {
                return
            }
            const res = await setCartCalculate({id: info.id, num})
            info.num = res.num
        },
        editCart() {
            this.isEdit = ! this.isEdit
            this.cartList.forEach(item => {
                item.isCheck = 0
            })
            this.isCheckAll = false
            this.changeItem = {}
        },
        checkAll() {
            this.isCheckAll = !this.isCheckAll
            this.cartList.forEach(item => {
                item.isCheck = this.isCheckAll? 1:0
            })
        },
         async onsubmit() {
            if (!checkNullObj(this.changeItem)) {
                this.$refs.uToast.show({
                    type: 'default',
                    message: "请选择需要结算的商品~"
                })
                return
            }
            var productInfo = this.changeItem.product
            if (productInfo.type == 'nft') {
                uni.showLoading({
                    title: '正在生成订单'
                })
                var confirm = await nftCreateOrder({ id: productInfo.id, number: this.changeItem.num, cartId: this.changeItem.id })
                const payment = await getWechatPay({
                    orderId: confirm.id,
                    productName: productInfo.name
                })
                uni.hideLoading()
                const than= this
                uni.requestPayment({
                    provider: 'wxpay',
                    ...payment,
                    success: function (res) {
                        console.log(res)
                        than.navigateTo("pages/orderComplete/index",{
                            orderId: confirm.id
                        })
                    },
                    fail: function (err) {
                        than.getData()
                    }
                })
            } else {
                this.navigateTo('pages/orderConfirm/index',{
                    id: productInfo.id,
                    skuId: this.changeItem.sku? this.changeItem.sku.id:null,
                    number: this.changeItem.num,
                    cartId: this.changeItem.id
                })
            }
        },
        navigateTo(path, params={}) {
            uni.$u.route({
				url: path,
				params
			})
        },
        async del() {
            var ids = []
            this.cartList.forEach(info => {
                if(info.isCheck) {
                    ids.push(info.id)
                }
            })
            const res = await delCart({ids})
            this.$refs.uToast.show({
                type: 'default',
                message: "删除成功"
            })
            this.getData()
        }
    }
}
</script>

<style lang="scss" scoped>
    .container{
        .navbar{
            display: flex;
        }
        .edit{
            position: absolute;
            left: 170rpx;
            width: 88rpx;
            height: 44rpx;
            border-radius: 24rpx;
            border: 1rpx solid #356CE7;
            text-align: center;
            line-height: 44rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #356CE7;
            margin-left: 22rpx;
        }
        .cart-info {
            padding: 0 22rpx;
            margin-bottom: 230rpx;
            overflow: auto;
            //margin-top: 44px;
            .cart-item {
                padding-top: 60rpx;
                display: flex;
                align-items: center;
                .product {
                    flex: auto;
                    margin-left: 14rpx;
                    display: flex;
                    position: relative;
                    .product-info {
                        margin-left: 20rpx;
                        .spec-names {
                            font-size: 24rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #666666;
                            margin: 15rpx 0;
                            height: 24rpx;
                        }
                        .product-price {
                            text {
                                margin-right: 19rpx;
                                font-size: 24rpx;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                            }
                            display: flex;
                            align-items: center;

                        }
                    }
                    .buy-num {
                        display: flex;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        .minus {
                            background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_sub.png) no-repeat;
                            background-size: 100% 100%;
                            text-align: center;
                            width: 40rpx;
                            height: 40rpx;
                            color: #FFFFFF;

                        }
                        .minus-disabled {
                            background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_disabled_sub.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .num {
                            width: 100rpx;
                            text-align: center;
                            line-height: 40rpx;
                            font-size: 28rpx;
                        }
                        .add {
                            background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_add.png) no-repeat;
                            background-size: 100% 100%;
                            text-align: center;
                            width: 40rpx;
                            height: 40rpx;
                        }
                        .add-disabled{
                            background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_disabled_add.png) no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }
            }
        }
        .radio {
            box-sizing: border-box;
            width: 44rpx;
            height: 44rpx;
            background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_radio.png) no-repeat;
            background-size: 100% 100%;
        }
        .radio-action {
            background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_selected.png) no-repeat;
            background-size: 100% 100%;
        }
        .bottom {
            background: #FFFFFF;
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 211rpx;
            padding: 20rpx;
            .total {
                overflow: hidden;
                .total-left {
                    float: left;
                    display: flex;
                    align-items: center;
                    .total-tip {
                        margin-left: 10rpx;
                    }
                }
                .total-right {
                    float: right;
                    display: flex;
                    align-items: center;
                    margin-right: 20rpx;
                    .total-title {
                        margin-right: 10rpx;
                    }
                }
            }
            .btn {
                width: 100%;
                height: 90rpx;
                background: #000000;
                text-align: center;
                font-size: 30rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 90rpx;
                margin-top: 30rpx;
            }
        }
        .nft-tag {
            width: 100rpx;
            height: 36rpx;
            background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/967825cfb630bf72832c10b8d3ed3d64ad249bc8.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 15rpx;
        }
        .empty {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
</style>
